<template>
  <div class="emoji-panel-wrap">
    <emoji
      v-for="(item,index) in emojis"
      :key="index"
      :text="item"
      @onClick="handleEmojiClick"
    />
  </div>
</template>
<script>
import Emoji from './emoji/emoji'
export default {
  components: {
    Emoji
  },
  data() {
    return {
      emojis: [
        '😀',
        '😃',
        '😄',
        '😁',
        '😆',
        '😅',
        '🤣',
        '😂',
        '🙂',
        '🙃',
        '🫠',
        '😉',
        '😊',
        '😇',
        '🥰',
        '😍',
        '🤩',
        '😘',
        '😗',
        '😚',
        '😙',
        '🥲',
        '😋',
        '😛',
        '😜',
        '🤪',
        '😝',
        '🤑',
        '🤗',
        '🤭',
        '🫢',
        '🫣',
        '🤫',
        '🤔',
        '🫡',
        '🤐',
        '🤨',
        '😐',
        '😑',
        '😶',
        '🫥',
        '😶‍🌫️',
        '😏',
        '😒',
        '🙄',
        '😬',
        '😮‍💨',
        '🤥',
        '😌',
        '😔',
        '😪',
        '🤤',
        '😴',
        '😷',
        '🤒',
        '🤕',
        '🤢',
        '🤮',
        '🤧',
        '🥵',
        '🥶',
        '🥴',
        '😵',
        '😵‍💫',
        '🤯',
        '🤠',
        '🥳',
        '🥸',
        '😎',
        '🤓',
        '🧐',
        '😕',
        '🫤',
        '😟',
        '🙁',
        '😮',
        '😯',
        '😲',
        '😳',
        '🥺',
        '🥹',
        '😦',
        '😧',
        '😨',
        '😰',
        '😥',
        '😢',
        '😭',
        '😱',
        '😖',
        '😣',
        '😞',
        '😓',
        '😩',
        '😫',
        '🥱',
        '😤',
        '😡',
        '😠',
        '🤬'
      ]
    }
  },
  methods: {
    handleEmojiClick(a) {
      this.$emit('emojiClick', a)
    }
  }
}
</script>

